<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="css/sq.css" media="all">
    <style type="text/css">
        body{
        }
        #mainContainer{
            overflow: hidden;
        }
        .layui-tab{
            margin-top: 0px;
            background-color: #FFF;
        }
        .layui-tab-brief>.layui-tab-title .layui-this{
            color: #FF0000;
            font-weight: bold;
            font-size: 16px;
        }
        .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
            border: none;
            border-radius: 0;
            border-bottom: 2px solid #FF0000;
        }
        .layui-tab-content {
            padding: 10px;
            background-color: #efefef;
        }
        .orderOne{
            margin-top: 5px;
            background-color:#FFF;
            padding: 10px;
            overflow: hidden;
        }
        .orderOne1{
            height: 40px;
            line-height: 40px;
            font-size: 16px;
        }
        .orderOne1 i{
            margin-right: 5px;
            font-size: 16px;
        }
        .orderOne1Right{
            text-align: right;
        }
        .orderOne2{
            padding: 10px;
            background-color: #efefef;
            overflow: hidden;
        }
        .orderOne3{
            height: 40px;
            line-height: 40px;
            border-bottom: 1px solid #efefef;
            text-align: right;
            overflow: hidden;
        }
        .orderOne3 span{
            margin-left: 5px;
        }
        .orderOne4{
            padding: 10px;
            overflow: hidden;
        }
        .orderbtContainer{
        }
        .orderbtContainer li{
            float: right;
            width: 20%;
            border: 1px solid #999;
            border-radius: 5px;
            margin-left: 5px;
            text-align: center;
            padding: 10px;
        }
        .layui-tab-title li{
            min-width: 50px;
        }
        .onlyOne{
            overflow: hidden;
        }
        .havemore{
            overflow: hidden;
        }
    </style>
</head>
<body>
<div id="mainContainer">
    <form>
    <div id="allContainer">

    </div>
    </form>
</div>
<div id="bottomContent">
    <ul id="bottomUL">
        <li >
            <i class="layui-icon" onclick="window.location.href='index.html'">&#xe68e;</i>
            <br><span>首页</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='ddlist.html'">&#xe63c;</i>
            <br><span>订单</span>
        </li>
        <li  class="sureStyle">
            <i class="layui-icon">&#xe657;</i>
            <br><span>购物车</span>
        </li>
        <li>
            <i class="layui-icon" onclick="window.location.href='my.html'">&#xe612;</i>
            <br><span>我的</span>
        </li>
    </ul>
</div>
<!--下方为模板部分-->
<!--用户登陆的模板-->
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" language="JavaScript"></script>
<script src="layui/layui.js"></script>
<script src="js/config.js"></script>
<script src="js/echarts.min.js"></script>

<script>
    sq.setapi("goods_list.json").setdata({}).sucessFun(function(rel){
        var obj = rel.comlist;
        console.log(obj);
        $("#allContainer").html("");
        var tempStr = "";
        for(var i=0;i<obj.length;i++){
            if(obj[i].midlist.length == 1){
                tempStr = '<div class="onlyOne"><div class="layui-col-xs2"><img src="'+obj[i].midlist[0].img+'" style="width: 100%;"></div>' +
                    '<div class="layui-col-xs10"><div style="padding: 10px;">'+obj[i].midlist[0].name+'</div></div></div>'
            }else{
                var moremidimg = "";
                for(var j=0;j<obj[i].midlist.length;j++){
                    moremidimg += '<div class="layui-col-xs2"><img src="'+obj[i].midlist[j].img+'" style="width: 95%;"></div>'
                }
                tempStr = moremidimg
            }
            $("#allContainer").html($("#allContainer").html()+'<div class="orderOne"><div class="orderOne1">' +
                '<div class="layui-col-xs8"><input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked=""><strong>'+obj[i].shop_name+'</strong><i class="layui-icon">&#xe602;</i></div>' +
                '<div class="layui-col-xs4 orderOne1Right"><i class="layui-icon">&#xe640;</i>   </div></div>' +
                '<div class="orderOne2">'+tempStr+'</div>' +
                '<div class="orderOne3">' +
                '<span>共'+obj[i].goods_num+'件商品</span><span>实付款</span><span style="font-size: 18px;font-weight: bold;">￥'+obj[i].price+'</span>' +
                '</div>' +
                '<div class="orderOne4">' +
                '<ul class="orderbtContainer">' +
                '<li>查看合同</li>' +
                '<li style="border: 1px solid #65d150;color: #65d150;background-color: #eefeeb;">确认收货</li>' +
                '<li>联系客服</li>' +
                '</ul>' +
                '</div>' +
                '</div>'
            );
        }
        layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });
            laydate.render({
                elem: '#date1'
            });

            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function(value){
                    if(value.length < 5){
                        return '标题至少得5个字符啊';
                    }
                }
                ,pass: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
                ,content: function(value){
                    layedit.sync(editIndex);
                }
            });

            //监听指定开关
            form.on('switch(switchTest)', function(data){
                layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });

            //监听提交
            form.on('submit(demo1)', function(data){
                layer.alert(JSON.stringify(data.field), {
                    title: '最终的提交信息'
                })
                return false;
            });

            //表单初始赋值
            form.val('example', {
                "username": "贤心" // "name": "value"
                ,"password": "123456"
                ,"interest": 1
                ,"like[write]": true //复选框选中状态
                ,"close": true //开关状态
                ,"sex": "女"
                ,"desc": "我爱 layui"
            })


        });

    }).run();
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

    });

</script>
</html>